<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加入喜欢的小组</title>
    <link rel="stylesheet" href="../夏留洋-group/css/Home.css">
    <link rel="stylesheet" href="../夏留洋-group/css/reset.css">
</head>
<body class="banxin">
    <div class="inerConter">
        <!--头部导航-->
        <header class="top min">
            <ul class="navigation">
                <li class="special">
                    豆瓣小组
                </li>
                <li>
                    <a class="distance" href="javascript:;">我的小组</a>
                </li>
                <li>
                    <a href="javascript:;">精选</a>
                </li>
                <li>
                    <a href="javascript:;">文化</a>
                </li>
                <li>
                    <a href="javascript:;">行摄</a>
                </li>
                <li>
                    <a href="javascript:;">娱乐</a>
                </li>
            </ul>
        </header>
        <!--h1标题-->
        <div>
            <div class="box">
                <p class="header min">欢迎来到豆瓣小组,看电影</p>
            </div>
            <div class="box1">
                <p class="font min">加入一些小组来制定你的小组首页。我们为你推荐了一些，按分类选择你感兴趣的加入，试试看！</p>
            </div>
        </div>
        <!--内容区-->
        <div class=" content min">
                <ul>
                <li class="same">
                    <h3>兴趣</h3>
                    <ul class="kind">
                        <li>旅行</li>
                        <li>摄影</li>
                        <li>影视</li>
                    </ul>
             </li>
                <li class="same">
                    <h3>生活</h3>
                    <ul class="kind">
                        <li>健康</li>
                        <li>美食</li>
                        <li>宠物</li>
                    </ul>
                </li>
                <li class="same">
                    <h3>购物</h3>
                    <ul class="kind">
                        <li>淘宝</li>
                        <li>二手</li>
                        <li>团购</li>
                    </ul> 
                </li>
                <li class="same">
                    <h3>社会</h3>
                    <ul class="kind">
                        <li>求职</li>
                        <li>租房</li>
                        <li>励志</li>
                    </ul>
                </li>
                <li class="same">
                    <h3>艺术</h3>
                    <ul class="kind">
                        <li>设计</li>
                        <li>手工</li>
                        <li>展览</li>
                    </ul>
            </li>
                <li class="same">
                    <h3>学术</h3>
                    <ul class="kind">
                        <li>人问</li>
                        <li>科学</li>
                        <li>自然</li>
                    </ul>
                </li>
                <li class="same">
                 <h3>情感</h3>
                    <ul class="kind">
                     <li>恋爱</li>
                        <li>心情</li>
                        <li>心理学</li>
                    </ul>
                </li>
                <li class="same">
                    <h3>闲聊</h3>
                    <ul class="kind">
                        <li>吐槽</li>
                        <li>笑话</li>
                        <li>直播</li>
                    </ul>
                </li>
            </ul>
        </div>  
        <div class=" hidden min">
            <input type="text">
            <div class="underline">
            
            </div>
        </div> 
        <!--分组项-->
        <div class="groups-panel min">
            <ul>
                <li class="box2">
                    <image class="tu" src="../夏留洋-group/images/7.jpg"></image>
                    <h4>我们都爱拼图</h4>
                    <p>31291 个拼图者</p>
                    <span>加入小组</span>
                </li>
                <li class="box2">
                    <image class="tu" src="../夏留洋-group/images/1.jpg"></image>
                    <h4>抬头，看树！</h4>
                    <p>82330 个个小树枝</p>
                    <span>加入小组</span>
                </li>
                <li class="box2">
                    <image class="tu" src="../夏留洋-group/images/2.jpg"></image>
                    <h4>手帐</h4>
                    <p>11862 个拼图者</p>
                    <span>加入小组</span>
                </li>
                <li class="box2">
                    <image class="tu" src="../夏留洋-group/images/3.jpg"></image>
                    <h4>种花种草</h4>
                    <p>68905 个组员</p>
                    <span>加入小组</span>
                </li>
                <li class="box2">
                    <image class="tu" src="../夏留洋-group/images/4.jpg"></image>
                    <h4>手工爱好者</h4>
                    <p>63785 个拼图者</p>
                    <span>加入小组</span>
                </li>
                <li class="box2">
                    <image class="tu" src="../夏留洋-group/images/5.jpg"></image>
                    <h4>手工嘚瑟组</h4>
                    <p>86521 个成员</p>
                    <span>加入小组</span>
                </li>
                <li class="box2">
                    <image class="tu" src="../夏留洋-group/images/6.jpg"></image>
                    <h4>自学成裁</h4>
                    <p>76592 个裁缝</p>
                    <span>加入小组</span>
                </li>
                <li class="box2">
                    <image class="tu" src="../夏留洋-group/images/8.jpg"></image>
                    <h4>纸袋收藏博物馆</h4>
                    <p>31291 个爱好者</p>
                    <span>加入小组</span>
                </li>
                <li class="box2">
                    <image class="tu" src="../夏留洋-group/images/9.jpg"></image>
                    <h4>植物鉴定小分队</h4>
                    <p>20569 个组员</p>
                    <span>加入小组</span>
                </li>
                <li class="box2">
                    <image class="tu" src="../夏留洋-group/images/10.jpg"></image>
                    <h4>神庙爱好者</h4>
                    <p>31291 个拼图者</p>
                    <span>加入小组</span>
                </li>
                <li class="box2">
                    <image class="tu" src="../夏留洋-group/images/11.jpg"></image>
                    <h4>养花种菜</h4>
                    <p>5668 个成员</p>
                    <span>加入小组</span>
                </li>
                <li class="box2">
                    <image class="tu" src="../夏留洋-group/images/12.jpg"></image>
                    <h4>压花笔记</h4>
                    <p>78962 个拼图者</p>
                    <span>加入小组</span>
                </li>
            </ul>
        </div>
        <!--下划线-->
        <div class="xian">

        </div>
        <!--搜索框-->
        <input type="text" class="search">
        <div class="enter">
            完成，进入我的小组
        </div>
        <hr width="900px" style="border:1px dashed black;height:1px" class="dotted min">
        <div>
            <span class="copyright">版权声明</span>
            <ul class="footer">
                <li class="you">
                    <a href="javascript:;">关于豆瓣</a>
                </li>
                <li class="you">
                    <a href="javascript:;">在豆瓣工作</a>
                </li>
                <li class="you">
                    <a href="javascript:;">联系我们</a>
                </li>
                <li class="you">
                    <a href="javascript:;">法侓声明</a>
                </li>
                <li class="you">
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li class="you">
                    <a href="javascript:;">移动应用</a>
                </li>
                <li class="you">
                    <a href="javascript:;">豆瓣广告</a>
                </li>
            </ul>
        </div>
    </div>
    <script>
        var name = "haha";
        var  obj = {
            name ="oo",
            test: function(){
                setTimeout(() => {
                    var name= "local";
                    alert(this.name)
                }, 1);
            }
        };
        obj.test();
    </script>
</body>
</html>